import React from 'react';
import {Card, Table, Button, Popconfirm, message} from "antd";

const dataSource = [
    {
        id: 1,
        name: '张三',
        dept: '技术部'
    },
    {
        id: 2,
        name: '李四',
        dept: '财务部'
    },
    {
        id: 3,
        name: '王五',
        dept: '销售部'
    },
    {
        id: 4,
        name: '孙六',
        dept: '推广部'
    },
    {
        id: 5,
        name: '赵七',
        dept: '运营部'
    }
]

const SysUserList = (props) => {

    function confirm(e) {
        message.success('Click on Yes').then(r => console.log(r));
    }

    function cancel(e) {
        message.error('Click on No').then(r => console.log(r));
    }

    const columns = [
        {
            title: '序号',
            key: 'id',
            width: 80,
            align: 'center',
            render: (txt, record, index) => index + 1
        },
        {
            title: '名称',
            dataIndex: 'name',
        },
        {
            title: '部门',
            dataIndex: 'dept',
        },
        {
            title: '操作',
            render: (txt, record, index) => {
                return (
                    <div>
                        <Button type={'primary'} size={'small'}>编辑</Button>
                        <Popconfirm
                            title="请确认是否禁用该用户"
                            onConfirm={confirm}
                            onCancel={cancel}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button style={{margin: '0 1rem'}} type={'primary'} size={'small'} danger>
                                禁用
                            </Button>
                        </Popconfirm>

                    </div>
                );
            }
        }

    ]

    return (
        <Card title={'用户列表'}
              extra={
                  <Button
                      type={'primary'}
                      size={'small'}
                      onClick={() => props.history.push('/admin/user/edit')}>
                      新增
                  </Button>}>
            <Table
                columns={columns}
                dataSource={dataSource}
                rowKey={record => record.id}
                bordered/>
        </Card>
    );
};

export default SysUserList;
